<template>
	<view class="page">
		<image style="width: 100%;height: 680rpx;" src="/static/image/icon-home-bg.png" mode=""></image>
		<view class="u-padding-20 home-body">
			<view class="home-title">星工网小程序</view>
			<view class="u-margin-bottom-20">
				<u-swiper height="150px" :list="bannerSwiperList" mode="round" name="pic" img-mode="heightFix*"
					border-radius="10">
				</u-swiper>
			</view>
			<view class="u-flex u-row-between u-margin-bottom-30">
				<image style="width: 345rpx;height: 150rpx" src="/static/image/icon-home-staff.png"
					@click="link_to_page('/pages-nanny/pages/work/index')"></image>
				<image style="width: 345rpx;height: 150rpx" src="/static/image/icon-home-work.png"
					@click="jobHunting()"></image>
			</view>
			<!-- //公告信息 -->
			<view class="u-flex u-row-between u-margin-bottom-30" style="width: 100%;">
				<u-notice-bar mode="vertical" bg-color="#ffffff" color="#dd1a00" border-radius="20rpx" :font-size="34"
					padding="30rpx 32rpx" :volume-size="46" :border-radius="20" :list="NoticeData" :more-icon="true"
					@click="noticeClick" @getMore="MoreClick" style="width: 100%;">
				</u-notice-bar>
			</view>
			<view class="u-flex u-row-between u-col-center u-margin-bottom-20">
				<view class="u-flex u-row-between u-col-center u-font-32">
					<image style="width: 10rpx;height: 30rpx;margin-right: 8rpx;"
						src="/static/image/icon-home-menu.png"></image>
					招聘信息
				</view>
				<view class="u-flex u-row-between u-col-center u-tips-color"
					@click="link_to_page('/pages-home/pages/notice/index')">
					更多
					<image style="width: 12rpx;height: 20rpx;margin-left: 8rpx;" src="/static/image/icon-right.png">
					</image>
				</view>
			</view>
			<view class="u-flex u-col-top u-margin-bottom-30 home-content" v-if="PutStatusIssuedList[0]"
				@click="link_to_page('/pages-home/pages/notice/detail?id=' + PutStatusIssuedList[0].Id)">
				<view class="u-flex-1 u-padding-22">
					<view class="u-font-30 u-font-w-6 u-padding-bottom-10 u-line-1" style="width: 500rpx;">
						{{ PutStatusIssuedList[0].Title }}
					</view>
					<view class="u-font-28 u-line-2" style="width: 500rpx;color: #636363;">
						{{ PutStatusIssuedList[0].Content }}
					</view>
					<view class="u-font-24 u-text-right u-padding-top-22 u-tips-color"
						style="position: absolute;bottom: 20rpx;right: 20rpx;">信息详情</view>
				</view>
			</view>


			<view class="u-flex u-row-between u-col-center u-margin-bottom-20">
				<view class="u-flex u-row-between u-col-center u-font-32">
					<image style="width: 10rpx;height: 30rpx;margin-right: 8rpx;"
						src="/static/image/icon-home-menu.png"></image>
					指导单位
				</view>
				<view class="u-flex u-row-between u-col-center u-tips-color"
					@click="link_to_page('/pages-home/pages/promotional/index?type=1')">
					更多
					<image style="width: 12rpx;height: 20rpx;margin-left: 8rpx;" src="/static/image/icon-right.png">
					</image>
				</view>
			</view>

			<view class="u-flex u-col-top u-margin-bottom-30 home-content" v-if="guidanceData[0]"
				@click="link_to_page('/pages-home/pages/promotional/detail?id=' + guidanceData[0].ID)">
				<image style="width: 220rpx;height: 194rpx;background-color: #CCCCCC;"
					:src="imgBaseUrl + guidanceData[0].ImgUrl" mode="aspectFill"></image>
				<view class="u-flex-1 u-padding-22">
					<view class="u-font-30 u-font-w-6 u-padding-bottom-10 u-line-1" style="width: 400rpx;">
						{{ guidanceData[0].Title }}
					</view>
					<view class="u-font-28 u-line-2" style="width: 420rpx;color: #636363;">
						{{ guidanceData[0].Subtitle }}
					</view>
					<view class="u-font-24 u-text-right u-padding-top-22 u-tips-color"
						style="position: absolute;bottom: 20rpx;right: 20rpx;">服务介绍</view>
				</view>
			</view>

			<view class="u-flex u-row-between u-col-center u-margin-bottom-20">
				<view class="u-flex u-row-between u-col-center u-font-32">
					<image style="width: 10rpx;height: 30rpx;margin-right: 8rpx;"
						src="/static/image/icon-home-menu.png"></image>
					支持单位
				</view>
				<view class="u-flex u-row-between u-col-center u-tips-color"
					@click="link_to_page('/pages-home/pages/promotional/index?type=2')">
					更多
					<image style="width: 12rpx;height: 20rpx;margin-left: 8rpx;" src="/static/image/icon-right.png">
					</image>
				</view>
			</view>
			<view class="u-flex u-col-top u-margin-bottom-30 home-content" v-if="supportData[0]"
				@click="link_to_page('/pages-home/pages/promotional/detail?id=' + supportData[0].ID)">
				<image style="width: 220rpx;height: 194rpx;background-color: #CCCCCC;"
					:src="imgBaseUrl + supportData[0].ImgUrl" mode="aspectFill"></image>
				<view class="u-flex-1 u-padding-22">
					<view class="u-font-30 u-font-w-6 u-padding-bottom-10 u-line-1" style="width: 400rpx;">
						{{ supportData[0].Title }}
					</view>
					<view class="u-font-28 u-line-2" style="width: 420rpx;color: #636363;">{{ supportData[0].Subtitle }}
					</view>
					<view class="u-font-24 u-text-right u-padding-top-22 u-tips-color"
						style="position: absolute;bottom: 20rpx;right: 20rpx;">最新动态</view>
				</view>
			</view>
			<view class="u-flex u-row-between u-col-center u-margin-bottom-20">
				<view class="u-flex u-row-between u-col-center u-font-32">
					<image style="width: 10rpx;height: 30rpx;margin-right: 8rpx;"
						src="/static/image/icon-home-menu.png"></image>
					爱心企业
				</view>
				<view class="u-flex u-row-between u-col-center u-tips-color"
					@click="link_to_page('/pages-home/pages/promotional/index?type=3')">
					更多
					<image style="width: 12rpx;height: 20rpx;margin-left: 8rpx;" src="/static/image/icon-right.png">
					</image>
				</view>
			</view>
			<view class="u-flex u-col-top u-margin-bottom-30 home-content" v-if="caringEnterprise[0]"
				@click="link_to_page('/pages-home/pages/promotional/detail?id=' + caringEnterprise[0].ID)">
				<image style="width: 220rpx;height: 194rpx;background-color: #CCCCCC;"
					:src="imgBaseUrl + caringEnterprise[0].ImgUrl" mode="aspectFill"></image>
				<view class="u-flex-1 u-padding-22">
					<view class="u-font-30 u-font-w-6 u-padding-bottom-10 u-line-1" style="width: 400rpx;">
						{{ caringEnterprise[0].Title }}
					</view>
					<view class="u-font-28 u-line-2" style="width: 420rpx;color: #636363;">
						{{ caringEnterprise[0].Subtitle }}
					</view>
					<view class="u-font-24 u-text-right u-padding-top-22 u-tips-color"
						style="position: absolute;bottom: 20rpx;right: 20rpx;">最新动态</view>
				</view>
			</view>
			<!-- <view class="u-flex u-row-between u-col-center u-margin-bottom-20">
				<view class="u-flex u-row-between u-col-center u-font-32">
					<image style="width: 10rpx;height: 30rpx;margin-right: 8rpx;"
						src="/static/image/icon-home-menu.png"></image>
					保洁法务
				</view>
				<view class="u-flex u-row-between u-col-center u-tips-color"
					@click="link_to_page('/pages-home/pages/promotional/index?type=4')">
					更多
					<image style="width: 12rpx;height: 20rpx;margin-left: 8rpx;" src="/static/image/icon-right.png">
					</image>
				</view>
			</view>
			<view class="u-margin-bottom-20">
				<u-card :border="false" :show-head="false" margin="0" padding="30">
					<view slot="body">
						<block v-for="(item, index) in legalAffairs" :key="item.ID">
							<view class="u-flex u-padding-bottom-20 u-padding-top-10"
								style="border-bottom: 1px solid #D4E0E3;" v-if="index < 3"
								@click="link_to_page('/pages-home/pages/promotional/detail?id=' + item.ID)">
								<image style="width: 33rpx;height: 28rpx;margin-right: 8rpx;"
									src="/static/image/icon-home-law.png" mode=""></image>
								<view class="u-line-1 u-font-32" style="width: 580rpx;color: #0068E9;text-decoration: underline;">
									{{ item.Title }}
								</view>
							</view>
						</block>
					</view>
				</u-card>
			</view> -->
			<image src="/static/image/icon-home-advertising.png" style="width: 100%;height: 120rpx;" />
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				isLogin: false,
				title: '选择',
				show: true,
				// 轮播图
				bannerSwiperList: [],
				// 指导单位
				guidanceData: [],
				// 支持单位
				supportData: [],
				// 爱心企业
				caringEnterprise: [],
				// 保洁法务
				legalAffairs: [],
				//招聘信息
				PutStatusIssuedList: [],
				//公告信息
				NoticeData: [],
				NoticeList: [],
			};
		},
		onShow() {
			this.PutStatusIssued();
		},
		onLoad(){
			this.loadPageData();
		},
		methods: {

			// 首页需要渲染的数据
			loadPageData() {
				this.$u.api.GetImgByFName({
					name: '/图片/小程序广告/'
				}).then(res => {
					if (res && res.length) {
						this.bannerSwiperList = res.map(item => {
							return `${this.imgBaseUrl}/Home/GetImgBy/${item.ID}?width=370&height=150`;
						});
					}
				});
				// 公告信息
				this.$u.api.NewsInformation({
					newType: 'e451163131014ac19fa7448776a63ea6'
				}).then(res => {
					if (res && res.code == 0) {
						var data = [];
						for (var i = 0; i < res.data.length; i++) {
							data.push(res.data[i].Title)
						}
						this.NoticeList = res.data;
						this.NoticeData = data;
					}
				});
				// 指导单位
				this.$u.api.NewsInformation({
					newType: 'df15373bb88841a098972ea5c45ecef7'
				}).then(res => {
					if (res && res.code == 0) {
						this.guidanceData = res.data;
					}
				});
				// 支持单位
				this.$u.api.NewsInformation({
					newType: 'de295cc4c164478a92b93a632543c54b'
				}).then(res => {
					if (res && res.code == 0) {
						this.supportData = res.data;
					}
				});
				// 爱心企业
				this.$u.api.NewsInformation({
					newType: 'a8c6f50dcd6d4d2eba066b67e2b6670c'
				}).then(res => {
					if (res && res.code == 0) {
						this.caringEnterprise = res.data;
					}
				});
				// 保洁法务
				// this.$u.api.NewsInformation({
				// 	newType: '9c8547d147414b3b8d43ec83debf7c49'
				// }).then(res => {
				// 	if (res && res.code == 0) {
				// 		this.legalAffairs = res.data;
				// 	}
				// });
			},
			//招聘信息、
			PutStatusIssued() {
				var panams = {
					filter: '',
					page: 1,
					rows: 1,
					Status: 1
				}
				this.$u.api.PutStatusIssued(panams).then(res => {
					if (res && res.code == 0) {
						var data = [];
						for (var i = 0; i < res.data.length; i++) {
							data.push(res.data[i].Title)
						}
						this.PutStatusIssuedList = res.data;
					}
				});
			},
			noticeClick(e) {
				console.log(this.NoticeList[e])
				this.link_to_page('/pages-home/pages/promotional/detail?id=' + this.NoticeList[e].ID);
			},
			MoreClick(e) {
				console.log(e)
				this.link_to_page('/pages-home/pages/promotional/index?type=5');
			},
			//找工作
			jobHunting() {
				var isLogin = uni.getStorageSync('IS_LOGIN')
				if (this.isLogin) {
					var userList = uni.getStorageSync('USER_INFO');
					var UserType = userList.UserType;
					var OtherId = userList.OtherId;
					if (UserType && OtherId) {
						this.link_to_page('/pages-home/pages/work/form?id=' + OtherId + '&type=' + UserType);
					} else {
						this.link_to_page('/pages-home/pages/work/index');
					}
				} else {
					this.isLogoin();
				}
			},
			isLogoin() {
				uni.showLoading({
					title: '请求中',
					mask: true
				});
				let $this = this;
				this.getWxCode(code => {
					this.$u.api.getOpenId(code).then(res => {
						if (res && res.code == 0) {
							$this.userInfo = res.data || {};
							uni.setStorageSync('USER_INFO', res.data);
							if (res.isOk == true) {
								uni.setStorageSync('IS_LOGIN', true);
								$this.jobHunting()
							} else {
								uni.setStorageSync('IS_LOGIN', false);
								$this.link_to_page('/pages/login/index');
							}
							$this.isLogin = uni.getStorageSync('IS_LOGIN');
						} else {
							uni.setStorageSync('IS_LOGIN', false);
							$this.link_to_page('/pages/login/index');
						}
						uni.hideLoading();
					});
				});
			},
			// 基于uni的获取code方法
			getWxCode(callBack) {
				uni.login({
					provider: 'weixin',
					onlyAuthorize: true,
					success: loginRes => {
						callBack(loginRes.code);
					},
					fail(e) {}
				});
			},
		}
	};
</script>
<style lang="scss" scoped>
	.page {
		background-color: #f4f5f7;

		.u-swiper {
			height: 45rpx !important
		}
	}

	.home-body {
		position: fixed;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
		overflow-y: scroll;
	}

	.home-title {
		padding: 88rpx 0 48rpx;
		font-size: 36rpx;
		font-weight: 500;
	}

	.home-content {
		position: relative;
		border-radius: 16rpx;
		background-color: #fff;
		overflow: hidden;
	}
</style>